<template>
	<view class="wantsee_main">

		<title @titleHeight='setPaddingTop' :center="false" title="影片详情" iconSize="38" bgcolor="#FFF" bgIMG="../static/movie-title.png"
		color="#2e2e2e"
		 @toclick="toBack(1)" icon="/static/img/other/to-back.png"></title>
		<!-- 头部 start -->
		<!-- <view class="alltop" :style=" 'padding-top:'+height+'px' ">
			<movice-top :value="moviedetailed"></movice-top>
		</view> -->
		<view class="movieInfo" :style=" 'padding-top:'+height+'px' ">
			<view class="cover">
				<image :src="moviedetailed.img" mode="" style="height: 268rpx;width: 200rpx;" v-if="moviedetailed.img"></image>
				<view class="notDataLayout" v-else></view>
			</view>
			<view class="info-box" v-if="moviedetailed.nm">
				<view class="info-1">
					{{moviedetailed.nm}}
				</view>
				<view class="info-2">
					{{moviedetailed.dur}}分钟
					<text style="margin-left: 8rpx;">{{moviedetailed.cat}}</text>
				</view>
				<view class="info-3">
					{{moviedetailed.rt}} 上映
				</view>
				<view class="info-4">
					<view class="canSee box">
						<image src="../static/movie-canSee.png.png" mode="" style="height: 27rpx;width: 28rpx;"></image>
						想看
					</view>
					<!-- <view class="hasSee box">已想看</view> -->
					<text class="text-box">
						<text class="text">{{moviedetailed.wish | trannumber}}</text>人想看
					</text>
				</view>
			</view>
			<view class="info-box notDataLayout" v-else>
				<view class="info-1"></view>
				<view class="info-2"></view>
				<view class="info-3"></view>
				<view class="info-4"></view>
			</view>
		</view>
		<!-- 头部 end -->
		
		<!-- 剧情简介 start -->
		<view class="moviedetailed" :style="{'background-color':'#fff'}">
			<text class="synopsis">简介:</text>
			<view class="hasData" v-if="moviedetailed.dra">
				<view class="detailed_text" v-if="textshow==false">{{moviedetailed.dra|ellipsis(200)}}</view>
				<view class="detailed_text" v-if="textshow==true">{{moviedetailed.dra}}</view>
				<view class="iconfont icon--arrow-bottom" @click="this.textshow=!this.textshow" v-if="textshow==false"></view>
				<view class="iconfont icon--arrow-top" @click="this.textshow=!this.textshow" v-if="textshow==true"></view>
			</view>
			<view class="notDataLayout" v-else>
				<view class="line-1"></view>
				<view class="line-2"></view>
				<view class="line-3"></view>
				<view class="line-4"></view>
			</view>
		</view>
		<!-- 剧情简介 end -->
		
		<!-- 演职人员 start -->
		<view class="moviepeople">
			<text class="detailed_font1">演职人员</text>
			<scroll-view scroll-x="true">
				<view class="hasData" v-if="moviedetailed.actors">
					<view class="actor_style" v-for="(item, index) in moviedetailed.actors.actors" :key="index">
						<image :src="item.avatar" mode="aspectFill" v-if="item.avatar"></image>
						<view class="not-IMG" v-else>
							<image src="../static/notAvatarIMG.png" mode="" style="width: 76rpx;height: 62rpx;"></image>
						</view>
						<view class="name overflow" style="margin-top: 10rpx;color: #333;">
							{{item.sc_name}}
						</view>
						<view class="identity overflow">
							{{item.act_name ? '饰：' + item.act_name : '导演'}}
						</view>
					</view>
				</view>
				<view class="notData_Layout" v-else>
					<view class="actor_style" v-for="(item, index) in 6" :key="index">
						<view class="item1"></view>
						<view class="item2"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 演职人员 end -->
		
		<!-- 影视剧照 start -->
		<view class="still">
			<text class="detailed_font1">影视剧照</text>
			<scroll-view scroll-x="true" class="movie_botm">
				<view class="movice-img-item" v-for="(item, index) in moviedetailed.imgs" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 影视剧照 end -->
		
		<!-- 底部按钮 start -->
		<!-- <view class="bottom-btn-box" v-if="moviedetailed.s == 1">
			<button class="public-big-btn" @click="toCinema">特惠购票</button>
		</view> -->
		<view class="button" @click="toCinema" v-if="moviedetailed.s == 1">特惠购票</view>
		<!-- 底部按钮 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import moviceTop from '@/pages/components/movice/movice-top.vue'
	export default {
		data() {
			return {
				height:93,
				detailedlist: [],
				textshow: false,
				moviedetailed: {},//电影详情
				optionData: {} //URL参数
			}
		},
		components: {
			title,
			moviceTop
		},
		onLoad(option) {
			this.optionData = option
			// console.log(option)
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.getMoviceDetail()
		},
		methods: {
			setPaddingTop(data){
				this.height = data.height
			},
			// 返回
			toBack(index) {
				this.$common.toBack(index)
			},
			// 影片详情
			getMoviceDetail() {
				let data = {
					mid:this.optionData.mid,
					s:this.optionData.s
				}
				this.$api.getMovieDetailed(data).then(res => {
					this.moviedetailed = res.data.data
					this.moviedetailed.actors = JSON.parse(this.moviedetailed.actors)
					this.moviedetailed.actors.actors.unshift(this.moviedetailed.actors.director[0])
					this.moviedetailed.imgs = JSON.parse(this.moviedetailed.imgs)
					this.moviedetailed.cat = this.moviedetailed.cat.replace('|',' ')
					uni.hideLoading()
				})
			},
			// 去购买
			toCinema() {
				uni.navigateTo({
					url: `/subpages/detailed/detailed?mid=${this.moviedetailed.mid}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 剧情简介
	.wantsee_main {
		position: relative;
		z-index: 1;
		height: 100vh;
		overflow: auto;
		

		.detailed_font1 {
			color: #333;
			font-weight: 700;
			font-size: 36rpx;
		}
		
		.movieInfo {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			padding: 0 40rpx;
			.cover {
				height: 268rpx;
				width: 200rpx;
				border-radius: 12rpx;
				overflow: hidden;
				// 封面的骨架屏
				.notDataLayout {
					height: 268rpx;
					width: 200rpx;
					border-radius: 12rpx;
					background: #F6F6F6;
				}
			}
			.info-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				margin-left: 20rpx;
				.info-1 {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
					margin-bottom: 20rpx;
				}
				.info-2,.info-3 {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 20rpx;
				}
				.info-4 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #666666;
					.box {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						
						padding: 4rpx 32rpx;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 16rpx;
						image {
							margin-right: 8rpx;
						}
					}
					.canSee {
						background: rgba(221,221,221,0.4);
					}
					.hasSee {
						background: rgba(255,67,69,0.1);
					}
					.text-box {
						
						.text {
							font-size: 32rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FF4345;
						}
					}
				}
			}
			// 右侧info的骨架屏
			.notDataLayout {
				.info-1 {
					width: 340rpx;
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.info-2 {
					width: 194rpx;
					height: 34rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.info-3 {
					width: 286rpx;
					height: 34rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.info-4 {
					width: 306rpx;
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
			}
		}

		// 剧情简介
		.moviedetailed {
			padding: 20rpx 28rpx;
			margin: 32rpx 40rpx;
			background: rgba(221,221,221,0.25);
			border-radius: 8rpx;
			color: #666;
			
			.synopsis {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #0D0D15;
			}

			.detailed_text {
				font-size: 28rpx;
				line-height: 40rpx;
				margin-top: 26rpx;
				
			}

			.icon--arrow-bottom {
				text-align: center;
				width: 100%;
				font-size: 36rpx;
				line-height: 60rpx;
				color: #333;
				font-weight: bold;
				margin-top: 6rpx;
			}

			.icon--arrow-top {
				text-align: center;
				width: 100%;
				font-size: 40rpx;
				color: #333;
				font-weight: bold;
				margin-top: 6rpx;
			}
			
			// 简介的骨架屏
			.notDataLayout {
				height: 100%;
				width: 100%;
				.line-1,.line-2,.line-3{
					height: 28rpx;
					width: 100%;
					margin-bottom: 28rpx;
					background: #F6F6F6;
					border-radius: 4px;
				}
				.line-1 {
					margin-top: 26rpx;
				}
				.line-4{
					height: 28rpx;
					width: 50%;
					background: #F6F6F6;
					border-radius: 4px;
				}
			}
		}

		.moviepeople {
			margin: 0 40rpx 32rpx;
			overflow-x: auto;
			white-space: nowrap;
			.hasData {
				.actor_style{
					width: 156rpx;
					margin-right: 8rpx;
					display: inline-block;
					
					&:last-of-type {
						margin:0;
					}
					>image {
						width: 100%;
						height: 230rpx;
						display: block;
						margin-top: 20rpx;
						border-radius: 8rpx;
						// -----背景图片，图片加载失败时会显示-----
						background: #DDDDDD;
						background-image: url('/subpages/static/notAvatarIMG.png');
						background-size: 76rpx 62rpx;
						background-repeat: no-repeat;
						background-position: center;
						// -------------------------------------
					}
					.not-IMG {
						width: 100%;
						height: 230rpx;
						display: block;
						border-radius: 8rpx;
						background: #DDDDDD;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					
					.name {
						color: #2E2E2E;
						text-align: center;
						width: 100%;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 32rpx;
					}
					.identity {
						color: #333;
						text-align: center;
						width: 100%;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 32rpx;
					}
				}
			}
			// 演职人员-骨架屏
			.notData_Layout {
				margin-top: 20rpx;
				.actor_style {
					margin-right: 8rpx;
					display: inline-block;
					.item1 {
						width: 156rpx;
						height: 230rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
					}
					.item2{
						height: 64rpx;
						width: 84rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
						
						margin: 10rpx auto 0;
					}
				}
				
			}
		}

		// 影视剧照
		.still {
			margin: 0 40rpx 144rpx;
			
			.movie_botm{
				margin-top: 20rpx;
				white-space: nowrap;
				.movice-img-item {
					width: 300rpx;
					height: 175rpx;
					border-radius: 8rpx;
					margin-right: 8rpx;
					display: inline-block;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
					&:last-of-type {
						margin-right: 0;
					}
				}
			}
		}
	
		// .bottom-btn-box {
		// 	position: fixed;
		// 	left: 0;
		// 	bottom: 0;
		// 	height: 140rpx;
		// 	background-color: #fff;
		// 	width: 100%;
		// 	padding: 35rpx 50rpx;
		// 	border-top: 1rpx solid rgba(0,0,0,.1);
		// 	.public-big-btn {
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: center;
		// 		box-shadow: 6rpx 6rpx 8rpx rgba(26,26,26,.2);
		// 		border-radius: 999rpx;
		// 	}
		// }
		.button {
			position: fixed;
			bottom: 24rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 646rpx;
			height: 96rpx;
			border-radius: 60rpx;
			background: linear-gradient(90deg, #FF5588 0%, #EF424F 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 36rpx;
			
		}
	}
</style>
